<template>
  <main>
    <h2>{{ choiseData[i].title }}</h2>

    <el-radio-group v-model="radio" class="select" :disabled="visibleResult">
      <el-radio label="a" size="large" class="item"
        >A. {{ choiseData[i].a }}</el-radio
      >
      <el-radio label="b" size="large" class="item"
        >B. {{ choiseData[i].b }}</el-radio
      >
      <el-radio label="c" size="large" class="item"
        >C. {{ choiseData[i].c }}</el-radio
      >
      <el-radio label="d" size="large" class="item"
        >D. {{ choiseData[i].d }}</el-radio
      >
    </el-radio-group>

    <div class="result" v-if="visibleResult">
      <h3 class="yes" v-if="radio === choiseData[i].yes">正确</h3>
      <h3 class="error" v-else>{{ `错误。正确答案：${choiseData[i].yes}` }}</h3>
    </div>

    <div>
      <el-button @click="visibleResult = true" type="primary">检验</el-button>
      <el-button @click="next">下一题</el-button>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import choiseData from "@/mock/choise";

const i = ref(0);
const visibleResult = ref(false);
const radio = ref("a");
const tooData: any = ref([]);

onMounted(() => {
  next();
});

const next = () => {
  if (tooData.value.length >= choiseData.length) {
    return ElMessage({
      message: "没有更多题了",
      type: "warning",
    });
  }
  visibleResult.value = false;
  radio.value = "a";
  const num = Math.floor(Math.random() * choiseData.length);
  if (!tooData.value.includes(choiseData[num])) {
    i.value = num;
    tooData.value.push(choiseData[num]);
  } else {
    next();
  }
};
</script>

<style lang="less">
ul {
  margin-top: 20px;
}
li {
  list-style: none;
}
.item {
  width: 100%;
  text-align: center;
}
.select {
  padding: 50px 100px;
}
.result {
  margin: 10px 0;

  .yes {
    font-weight: bold;
    color: rgb(31, 146, 108);
  }
  .error {
    font-weight: bold;
    color: rgb(224, 25, 18);
  }
}
</style>
>
